<template>
	<view class="page-search">
		<!-- 搜索 开始 -->
		<view class="cu-bar search custom-search">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input :adjust-position="false" type="text" placeholder="搜索你想看的内容" confirm-type="search" v-model="content" @confirm="handleSearch"/>
				<view class="flex align-center margin-right-sm" v-if="content" @click="handleDelete">
					<image src="/static/icons/close.png" style="width: 44rpx;height: 44rpx;"/>
				</view>
			</view>
			<view class="action">
				<button class="cu-btn round" @click="handleSearch">搜索</button>
			</view>
		</view>
		<!-- 搜索 结束 -->
		<search-list :content="content" :type="type" v-if="isSearched" ref="mySearch"/>
		
		<view class="padding" v-else>
			<h-line title="推荐视频" />
			<video-list  :list="recommendList" :videoStyle="videoStyle"/>
		</view>
		
	</view>
</template>

<script>
	import HLine from "@/components/HLine"
	import SearchList from "./components/SearchList"
	import VideoList from "./components/VideoList"
	export default {
		data() {
			return {
				content: "",
				isSearched:false,//是否搜索过
				recommendList:[],
				videoStyle: {
					padding: '25rpx',
					borderRadius: '10rpx'
				},
				type:""
			}
		},
		components:{
			SearchList,
			VideoList,
			HLine
		},
		methods: {
			async getRecommendList() {
				let query = {
					is_recommend: 1,
					page: 1,
					size: 10
				}
				let {
					data
				} = await this.waitingLoading(this.$h.api.videoModel.getSearch)(query)
				this.recommendList=data.data
			},
			handleDelete(){
				this.content=""
			},
			handleSearch(){
				this.isSearched=true
				this.$nextTick(()=>{
					this.$refs.mySearch.getSearchList("r")
				})
			}
		},
		onLoad({type}){
			this.type=type
			this.getRecommendList()
		}
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.page-search {
		height: 100%;

		.search.custom-search {
			height: 120rpx;

			.search-form {
				width: 500rpx;
				height: 60rpx;
				background-color: #FFFFFF;
			}

			.action {
				.cu-btn {
					width: 190rpx;
					height: 60rpx;
					background-color: $mainColor;
					font-size: 28rpx;
					color: #fff;
				}
			}
		}

		
	}
</style>
